<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div>
		<div id="app">
			<div class="data_arr">
				<input type="text" v-model="input_data">
				<ul>
					<li v-for="(item,index) in data_arr" class="data_arr_box" :key="index" @click="add(item)">
						<div class="" :class="select_data.indexOf(item)==-1?`no_select`:`select`"></div>
						<div class="">{{item.title}}</div>
						<div>{{item.user}}</div>
					</li>
				</ul>
			</div>
			<div class="select_arr">
				<div class="select_title">已选择数据</div>
				<ul>
					<li v-for="(item,index) in select_data" class="data_arr_box" :key="index" @click="add(item)">
						<!-- <div class="" :class="data_arr.indexOf(item)==-1?`select`:`no_select`"></div> -->
						<div class="">{{item.title}}</div>
						<div>{{item.user}}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			input_data: "",
			data_arr: [
				{ id: 1, title: "测试 A", user: "用户 A" },
				{ id: 2, title: "测试 B", user: "用户 B" },
				{ id: 3, title: "测试 C", user: "用户 C" }
			],
			select_data: []
		},

		methods: {
			add(item) {
				console.log(this.select_data.indexOf(item));
				if (this.select_data.indexOf(item) == -1) {
					this.select_data.push(item)
					console.log(1);
				} else {
					console.log(2);
					this.select_data.splice(this.select_data.indexOf(item), 1)
				}
				console.log(this.select_data);
			}
		}
	})

</script>
<style>
	li,
	ul {
		list-style: none;
		padding: 0;
	}

	#app {
		display: flex;
		justify-content: center;
		width: 100vw;
		min-width: 900px;
	}



	#app>div {
		flex: 1;
		border: 1px solid #ccc;
		margin: 10px 20px;

	}

	.select {
		width: 15px;
		height: 15px;
		border: 1px solid #ccc;
		background: green;
	}

	.no_select {
		width: 15px;
		height: 15px;
		border: 1px solid #ccc;
	}

	.data_arr {}

	.select_arr {
		flex: 1;
		border: 1px solid #ccc;
	}

	.data_arr_box {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		cursor: pointer;
		user-select: none;
	}

	input {
		display: inline-block;
		width: 350px;
		height: 50px;
		margin: 20px;
		padding: 10px;
		border: 1px solid #ccc;
	}

	.select_title {
		height: 50px;
	}
</style>